<template>
  <div class="cell" :style="columesStyle">
    <div class="cell__row"
    :class="{ 'cell__row--scroller': item.type === 'scroller' }"
    v-for="item in columns"
    :key="item.filed"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    columesStyle () {
      const columns = this.columns.map((v, index) => {
        if (v.width) return v.width + 'px'
        return !index ? '3fr' : '1fr'
      })
      return { gridTemplateColumns: columns.join(' ') }
    }
  }
}
</script>

<style lang="scss" scoped>
.cell {
  display: grid;
  box-sizing: border-box;
  height: 48px;
  box-sizing: border-box;
  border-left: 1px solid var(--border-color);
}
.cell__row {
  padding: 0 10px;
  border: 1px solid var(--border-color);
  // border-bottom: 0;
  border-left: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  font-weight: bold;
  height: 48px;
  box-sizing: border-box;
  span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &--scroller {
    border: 0;

  }
}
div.cell__row:last-child {

}
</style>
